<template>
	<div class="layout-padding w100">
		<div class="layout-padding-auto layout-padding-view">
			<div class="mb-2">
				<el-button type="primary" class="ml10" icon="folder-add" @click="createApiGroup"> 新增 </el-button>
			</div>
			<el-table :data="apiGroupList" border>
				<el-table-column prop="name" label="名称" />
				<el-table-column label="操作" width="400">
					<template #default="scope">
						<el-button type="warning" size="small" @click="updateApiGroup(scope.row)" circle>
							<el-icon>
								<edit />
							</el-icon>
						</el-button>
						<el-button type="danger" size="small" @click="deleteApiGroup(scope.row)" circle>
							<el-icon>
								<delete />
							</el-icon>
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<gruopApiDialog ref="gruopApiDialog" @refresh="getApiGroupList" />
			<gruopUplate ref="gruopUplate" @refresh="getApiGroupList" />
		</div>
	</div>
</template>

<script>
import request from '/@/utils/request111';
import { Delete, DocumentAdd, Edit } from '@element-plus/icons-vue';
import gruopApiDialog from './ApiGroupCreate.vue';
import gruopUplate from './ApiGroupUpdate.vue';

export default {
	name: 'ApiGroupList',
	components: {
		Delete,
		DocumentAdd,
		gruopUplate,
		gruopApiDialog,
		Edit,
	},
	data() {
		return {
			apiGroupList: [],
			visible: false,
			visibleUplate: false,
		};
	},
	created() {
		this.getApiGroupList();
	},
	methods: {
		handleVisible(val) {
			this.visible = val;
			this.visibleUplate = val;
			this.getApiGroupList();
		},
		getApiGroupList() {
			request('/api/sys/api-groups', { method: 'GET' }).then((response) => {
				if (response.ok) {
					response.json().then((data) => {
						this.apiGroupList = data;
					});
				}
			});
		},
		createApiGroup() {
			this.$refs.gruopApiDialog.openDialog();
		},
		updateApiGroup(apiGroup) {
			this.$refs.gruopUplate.openDialog(apiGroup.id);
		},
		deleteApiGroup(apiGroup) {
			this.$confirm('确定删除？').then(() => {
				let url = '/api/sys/api-groups/' + apiGroup.id;
				request(url, { method: 'DELETE' }).then((response) => {
					if (response.ok) {
						let index = this.apiGroupList.indexOf(apiGroup);
						this.apiGroupList.splice(index, 1);
						this.$message.success('删除成功！');
					}
				});
			});
		},
	},
};
</script>

<style scoped></style>
